<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="icon" href="../favicon.ico" />
	<title>jsx语法规则</title>
	<style>
		.title {
			background-color: orange;
			width: 200px;
			font-size: 88px;
		}
	</style>
</head>
<body>
	<!--  准备好一个容器 -->
	<div id="test"></div>
	
		
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom,用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel,用于将 jsx转为 js-->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	
	<script type="text/babel">
		const myId = 'aTguiGu'
		const myData = 'hello,ReAcT'
		
		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h2 className="title" id={myId.toLowerCase()}>
					<span style={{color: 'red', fontSize:'29px'}}>{myData.toLowerCase()}</span>
				</h2>
				<h2 className="title" id={myId.toUpperCase()}>
					<span style={{color: 'red', fontSize:'29px'}}>{myData.toLowerCase()}</span>
				</h2>
				<input type="text"/>
				<good>123</good>
			</div>
		)
		//2. 渲染虚拟DOM到页面
		ReactDOM.render(VDOM, document.getElementById("test"))
		
		/**
		 * jsx语法规则
		 * 	1.定义虚拟DOM时，不要写引号
		 *  2.标签中混入JS表达式时要用 {}
		 *  3.样式的类名指定不要用class,要用className
		 *  4.内联样式要用 style={{key:value}}的形式
		 *     value要用单引号括起来，多单词要用驼峰
		 * 
		 *  5.虚拟DOM只能有一个根标签
		 *  6.标签必须闭合
		 *  7.标签首字母
		 * 		(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
		 * 		(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义则报错
		 * 
		 * 		 
		 */
		
		
		
	</script>
</body>
</html>
